<template>
  <div class="mine">
    <div class="mine-header">
      <van-image
        round
        width="6rem"
        height="6rem"
        fit="cover"
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1096035747,449039968&fm=26&gp=0.jpg"
      >
        <template v-slot:loading><van-loading color="#1989fa"/></template>
        <template v-slot:error>加载失败</template>
      </van-image>
      <div v-if="$store.state.isLogin">
        <span @click="$store.state.isLogin = false">退出登陆</span>
      </div>
      <div v-else>
        <span is="router-link" tag="span" to="/login">登陆</span>
      </div>
    </div>
    <div class="goods-order cell">
      <van-grid>
        <van-grid-item
          v-for="item in orderItem"
          :key="item.title"
          @click="clickOrderListHandler"
        >
          <template #icon>
            <van-icon
              :name="item.icon"
              size="34"
              :color="item.title === '全部订单' ? '#0000FF' : '#1989fa'"
            />
          </template>
          <template #text>
            <span class="van-grid-item__text">{{ item.title }}</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- Cell单元格 -->
    <van-cell
      class="cell"
      v-for="item in cellList"
      :key="item.path"
      :title="item.title"
      :icon="item.icon"
      is-link
      :to="item.path"
    />
  </div>
</template>

<script>
import routes from "@/router/routes";
import Vue from "vue";
import {
  Image as VanImage,
  Loading,
  Grid,
  GridItem,
  Icon,
  Cell,
  CellGroup,
  Toast
} from "vant";

Vue.use(VanImage);
Vue.use(Loading);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Toast);
export default {
  name: "Mine",
  data() {
    return {
      orderItem: [],
      cellList: []
    };
  },
  created() {
    let _index = null;
    routes.forEach((item, index) => {
      if (item.name === "Mine") _index = index;
    });
    this.orderItem = routes[_index].meta.orderList;
    this.cellList = routes[_index].meta.cellList;
    // console.log(meta);
  },
  methods: {
    clickOrderListHandler() {
      Toast("未开发");
    }
  }
};
</script>

<style lang="scss" scoped>
.mine {
  height: 100%;
  overflow: auto;
  .mine-header {
    box-shadow: 0 2px 4px #31a5fc;
    background: #31a5fc;
    text-align: center;
    color: #43240c;
    padding: 6px 0;
  }
  .cell {
    margin-top: 20px;
  }
}
</style>
